<template>
    <div class="Carused">
        <Head msg="车源编辑"></Head>
        <div class="login-list" style="margin-top: 0">
            <div><span class="notice">* </span>封面图</div>
            <div class="article-pic" style="margin-left: 8px">
                <cube-upload
                        :value="value1"
                        :action="action1"
                        :simultaneous-uploads="1"
                        :max="1"
                        @file-removed="removed1"
                        @files-added="filesAdded"/>
            </div>
        </div>
        <!--        <div class="article-pic">-->
        <!--            <cube-upload-->
        <!--                    :value="value1"-->
        <!--                    :action="action1"-->
        <!--                    :simultaneous-uploads="1"-->
        <!--                    :max="1"-->
        <!--                    @file-removed="removed1"-->
        <!--                    @files-added="filesAdded"/>-->
        <!--        </div>-->
        <div class="login-list">
            <div><span class="notice">* </span>车型年份</div>
            <input class="input-default" placeholder="请输入年份" type="text" v-model="caryear"></input> 款
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>选择品牌</div>
            <input type="text" style="width: 65vw" class="input-default" readonly="" :value="brankinfo?brankinfo.name:''"
                   placeholder="请选择品牌车系" @click="brandclose"></input>
        </div>
        <div v-if="type_class==2">
            <div class="login-list">
                <div><span class="notice">* </span>输入类型</div>
                <input type="text" style="width: 65vw" class="input-default" v-model="extend.cate.type"
                       placeholder="请输入类型，例：国产，进口，合资"></input>
            </div>
            <div class="login-list">
                <div><span class="notice">* </span>输入车系</div>
                <input type="text" style="width: 65vw" class="input-default" v-model="extend.cate.audi"
                       placeholder="请输入车系"></input>
            </div>
            <div class="login-list">
                <div><span class="notice">* </span>输入年份</div>
                <input type="text" style="width: 65vw" class="input-default" v-model="extend.cate.year"
                       placeholder="请输入年份"></input>
            </div>
            <div class="login-list">
                <div><span class="notice">* </span>输入型号</div>
                <input type="text" style="width: 65vw" class="input-default" v-model="extend.cate.model"
                       placeholder="请输入型号"></input>
            </div>
        </div>
        <div style="margin-top: 10px;font-size: 13px;color:blue;text-decoration: underline;margin-left: 22vw;padding-left: 10px;text-align: left "
             @click="diyBrank">{{type_class==2?'点此选择已有品牌车系':'找不到品牌车系？点此自定义'}}
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>外观颜色</div>
            <input class="input-small" type="text" placeholder="输入颜色" v-model="outcolor"></input>
            <div style="width: fit-content;margin-right: 3px">内饰颜色</div>
            <input class="input-small" type="text" placeholder="输入颜色" v-model="insidecolor"></input>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>选择类型</div>
            <cube-select
                    v-model="typevalue"
                    :options="type"
                    placeholder="选择类型"
                    @change="typechange"
            >
            </cube-select>
            <div style="width: fit-content;font-size: 15px">现车/期货</div>
            <cube-select
                    v-model="cartimetype"
                    :options="timetype"
                    placeholder="请选择"
                    @change="timetypechange"
            >
            </cube-select>
            <!--            <div style="width: fit-content;font-size: 15px">现车/期货</div>-->
            <!--            <input class="input-small" type="text" placeholder="选择输入" v-model="cartimetype"></input>-->
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>汽车排量</div>
            <input class="input-default" type="text" placeholder="请输入汽车排量" v-model="carrow"></input>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>排放标准</div>
            <input class="input-default" type="text" placeholder="请输入排放标准" v-model="carstander"></input>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>车源地址</div>
            <input class="input-default" type="text" placeholder="请输入车源地址" v-model="caraddress"></input>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>指导价格</div>
            <input class="input-default" type="text" placeholder="请输入指导价格" v-model="carmarketprice"></input>万
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>经销商价</div>
            <input class="input-default" type="text" placeholder="请输入经销商价格" v-model="carprice"></input>万
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>待售数量</div>
            <input class="input-default" type="text" placeholder="请输入待售数量" v-model="carnum"></input>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>有效期限</div>
            <input class="input-small" type="text" readonly="" placeholder="请选择时间" :value="timestar"
                   @click="showDatePicker1"></input>至
            <input class="input-small" type="text" readonly="" placeholder="请选择时间" :value="timeend"
                   @click="showDatePicker2"></input><span style="font-size: 10px;color: red">(最长1年)</span>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>车型配置</div>
            <textarea class="input-textarea" type="text" placeholder="默认标配请注明：标配" v-model="cardeploy"></textarea>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>联系电话</div>
            <input class="input-default" type="number" placeholder="请输入联系电话" v-model="mobile"></input>
        </div>
        <div class="login-list">
            <div><span class="notice">* </span>定金担保</div>
            <input class="input-default" type="number" placeholder="请输入定金金额" v-model="earnestmoney"></input>元
        </div>


        <div class="login-list">
            <div><span class="notice">* </span>新车图片</div>
        </div>
        <div class="article-pic">
            <cube-upload
                    :value="value2"
                    :action="action2"
                    :simultaneous-uploads="1"
                    @file-removed="removed2"
                    @files-added="filesAdded"
                    :max="8"
            />
        </div>
        <div class="foot-btn">
            <div class="close-btn" @click="closeadd">取消</div>
            <div v-if="!id" class="submit-btn" @click="releaseCar">发布</div>
            <div v-if="id" class="submit-btn" @click="saveCar">修改</div>
        </div>


        <div v-if="brand" class='brand-head' >
            <img class='brand-head-pic' src='../../public/img/icons/icon-left.png' @click='brandback'></img>
            <div>选择品牌车系</div>
        </div>
        <!-- 品牌车系模态框 -->
<!--        <cube-scroll ref="brandModelScroll"-->
<!--                     :data="brandList"-->
<!--                     class='brand-model'-->
<!--                     :class='brand?"brand-active":""'-->
<!--        >-->

<!--            <div class='mine-list' style='background:white;'>-->
<!--                <div class='mine-list-list-left' @click='brandclear'>-->
<!--                    <div class='mine-list-list-left-name' style="margin: 0">不限品牌</div>-->
<!--                </div>-->
<!--                <div class='mine-list-list-left' v-for='(item,index) in brandList' :key="item.id"-->
<!--                     @click='brandclick(index)'>-->
<!--                    <div class='mine-list-list-left-img'>-->
<!--                        <img :src='item.image'>-->
<!--                    </div>-->
<!--                    <div class='mine-list-list-left-name' :class="brandindex==index?'color-active':''">{{item.mobile_name}}</div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </cube-scroll>-->
<!--        <cube-scroll-->
<!--                ref="brandChildScroll"-->
<!--                :data="brandListchild"-->
<!--                class='brand-child'-->
<!--                :class='brand&&brandchlid?"brand-child-active":""'>-->
<!--            <div class='mine-list-list-left' @click='brandchildclick(-1)'>-->
<!--                <div class='mine-list-list-left-name' style="margin-top: 45px">不限车系</div>-->
<!--            </div>-->
<!--            <div class='mine-list-list-left' :class="item.is_blod==1?'line-active':''" v-for='(item,index) in brandListchild' @click='brandchildclick(index)'>-->
<!--                <div class='mine-list-list-left-name'>{{item.mobile_name}}</div>-->
<!--            </div>-->
<!--        </cube-scroll>-->

        <cube-scroll ref="brandModelScroll"
                     :data="brandList"
                     class='brand-model'
                     :class='brand?"brand-active":""'
        >

            <div class='mine-list' style='background:white;'>
                <div class='mine-list-list-left' @click='brandclear'>
                    <div class='mine-list-list-left-name' style="margin: 0">不限</div>
                </div>
                <div v-for="(items,key) in brandList">

                    <div v-if="backinfo.p_level==0" :id="key" class="letter-title">{{key}}</div>
                    <div v-if="backinfo.p_level==0" class='mine-list-list-left' v-for='(item,index) in items'
                         @click='brandclick(item)'>
                        <div style="display: flex;align-items: center">
                            <div class='mine-list-list-left-img'>
                                <img :src='item.image'>
                            </div>
                            <div class='mine-list-list-left-name' :class="brandindex==index?'color-active':''">
                                {{item.mobile_name}}
                            </div>
                        </div>
                    </div>

                    <div v-if="backinfo.p_level!=0&&backinfo.p_level!=3" class='mine-list-list-left'
                         @click='brandclick(items)'>
                        <div style="display: flex;align-items: center">
                            <div style="margin-left: 0" class='mine-list-list-left-name'
                                 :class="brandindex==index?'color-active':''">{{items.mobile_name}}
                            </div>
                        </div>
                        <div style="color: #888;font-size: .8rem">{{items.car_sum?items.car_sum:0}} ></div>
                    </div>

                    <div v-if="backinfo.p_level==3" class="letter-title">{{items.name}}</div>
                    <div v-if="backinfo.p_level==3" class='mine-list-list-left' v-for='(item,index) in items.child' @click='brandclick(item)'>
                        <div style="display: flex;align-items: center">
                            <div style="margin-left: 0" class='mine-list-list-left-name'
                                 :class="brandindex==index?'color-active':''">
                                {{item.mobile_name}}
                            </div>
                        </div>
                        <div style="color: #888;font-size: .8rem">
                            {{item.car_sum?item.car_sum:0}} >
                        </div>
                    </div>
                </div>
            </div>

        </cube-scroll>

        <div v-if="brand&&backinfo.p_level==0" class="brand-link">
            <div class="active">选</div>
            <div v-for="(items,key) in brandList" :class="{'active':letternumber==key}" @click="scrollTo(key)">{{key}}</div>
        </div>
    </div>
</template>


<script lang="ts">
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";
    // import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
    import Head from "@/components/Head.vue";

    @Component({
        components: {
            Head,
        },
    })

    export default class Carused extends Sence {
        public letternumber:any = 'A'; //品牌首字母排序之当前选中位置
        public brankinfo:any = ''; //点击品牌车系数据


        public id: any = "";//编辑文章id
        public value1: any = [];//封面图渲染数据
        public value2: any = [];//文章图渲染数据
        public title: string = "";
        public content: string = "";
        public file: string = "";//封面图片提交数据
        public files: any = [];//文章图片提交数据
        // public diy: boolean = false;//自定义品牌框显示隐藏

        public brand: any = false; //品牌车系模态框显示隐藏参数,true显示false隐藏
        public brandchlid: any = false; //车系模态框显示隐藏参数,true显示false隐藏
        public brandList: any = [];//品牌车系数组,
        public brandListchild: any = [];//当前选中品牌的车系数组
        public brandindex: any = -1;//当前选中品牌index
        public brandvalue: any = {mobile_name: "", id: ""}; //当前选中车系对象
        public backinfo:any = ''; // 品牌框返回数据


        public type: any = ["国产版", "中规版", "美规版", "欧规版", "中东版", "加规版", "墨规版"];//类型
        public timetype: any = ["现车", "期货"];//汽车交车类型
        public typevalue: string = "";//类型值
        public timestar: string = "";//开始时间
        public timeend: string = "";//结束时间
        public mintime: any = "";//结束时间的起始时间
        public maxtime: any = "";//结束时间的结束时间


        public  type_class:number=1;
        public extend: any = {
            cate: {
                type:'',
                audi:'',
                year:'',
                model:'',
            },
        };//自定义汽车品牌车系
        public carrow: any = "";//汽车排量
        public caryear: any = "";//汽车年份
        public outcolor: any = "";//外观颜色
        public insidecolor: any = "";//内饰颜色
        public cartimetype: any = "";//汽车交车方式
        public carstander: any = "";//排放标准
        public caraddress: any = "";//车源地址
        public carmarketprice: any = "";//指导价格
        public carprice: any = "";//经销商价格
        public carnum: any = "";//待售数量
        public cardeploy: any = "";//车型配置
        public mobile: any = "";//联系电话
        public earnestmoney: any = "";//定金价格

        public action1: any = {
            target: this.apiurl + "api/v1/uploadImg",
            fileName: "image",
            checkSuccess: this.uploadsuccess1,
        };
        public action2: any = {
            target: this.apiurl + "api/v1/uploadImg",
            fileName: "image",
            checkSuccess: this.uploadsuccess2,
        };

        public mounted(): void {
            // this.getShopCate();
            if (this.$route.query.id) {
                this.id = this.$route.query.id;
                this.getUserCar();
            }
        }

        // 图片限制大小
        public filesAdded(files: any): void {
            let hasIgnore = false;
            const maxSize = 2 * 1024 * 1024; // 2M
            for (let k in files) {
                const file = files[k];
                if (file.size > maxSize) {
                    file.ignore = true;
                    hasIgnore = true;
                }
            }
            hasIgnore && (<any> this).$createToast({
                type: "warn",
                time: 1500,
                txt: "上传失败，图片大于2M"
            }).show();
        }

        // 封面图片上传成功回调
        public uploadsuccess1(res: any): any {
            this.file = res.data.name;
            return res.status == 1;
        }

        // 文章图片上传成功回调
        public uploadsuccess2(res: any): any {
            this.files.push(res.data.name);
            return res.status == 1;
        }

        // 删除封面图片
        public removed1(res: any): void {
            this.file = "";
        }

        // 删除文章图片
        public removed2(res: any, k: number): void {
            console.log(k);
            for (let k in this.files) {
                if (this.files[k] == res.response.data.name) {
                    this.files.splice(k, 1);
                }
            }
            console.log(res.response.data.name);
        }

        // 类型改变事件
        public typechange(value: any) {
            this.typevalue = value;
        }

        // 类型改变事件
        public timetypechange(value: any) {
            this.cartimetype = value;
        }

        //分类列表
        // public getShopCate() {
        //     this.post('api/v1/getShopCate', {}).then((res: any) => {
        //         this.brandList = res.data.cateList;
        //
        //     });
        // }

        // 开始时间选择
        public showDatePicker1() {
            (<any> this).$createDatePicker({
                title: '时间选择',
                min: new Date(),
                max: new Date(2030, 9, 20),
                value: new Date(),
                onSelect: this.selectHandle1,
                onCancel: this.cancelHandle1
            }).show();
        }

        // 开始时间选择确定
        public selectHandle1(date: any, selectedVal: any, selectedText: any) {
            this.timestar = selectedVal.join('-');
            this.timeend = '';
            let datetime: any = new Date(this.timestar);
            let min: any = datetime.setDate(datetime.getDate() + 1);
            let max: any = datetime.setDate(datetime.getDate() + 365);
            min = new Date(min);
            max = new Date(max);
            this.mintime = [min.getFullYear(), min.getMonth(), min.getDate()];
            this.maxtime = [max.getFullYear(), max.getMonth(), max.getDate()];
        }

        // 开始时间选择取消
        public cancelHandle1() {

        }

        // 结束时间选择
        public showDatePicker2() {
            (<any> this).$createDatePicker({
                title: '时间选择',
                min: new Date(this.mintime[0], this.mintime[1], this.mintime[2]),
                max: new Date(this.maxtime[0], this.maxtime[1], this.maxtime[2]),
                value: new Date(),
                onSelect: this.selectHandle2,
                onCancel: this.cancelHandle2
            }).show();
        }

        // 结束时间选择确定
        public selectHandle2(date: any, selectedVal: any, selectedText: any) {
            this.timeend = selectedVal.join("-");
        }

        // 开始时间选择取消
        public cancelHandle2() {

        }

        // 车源详情
        public getUserCar(): void {
            this.post('api/v1/getUserCar', {goods_id: this.id}).then((res: any) => {
                let info: any = res.data.info;
                this.file = info.goods_thumb;
                this.caryear = parseInt(info.setparam.year);
                this.outcolor = info.setparam.out_color;
                this.insidecolor = info.setparam.in_color;
                this.typevalue = info.setparam.type;
                this.cartimetype = info.setparam.mold;
                this.carrow = info.setparam.output;
                this.carstander = info.setparam.emission;
                this.caraddress = info.setparam.area;
                this.carmarketprice = info.market_price;
                this.carprice = info.goods_price;
                this.carnum = info.store_count;
                this.cardeploy = info.setparam.setting;
                this.mobile = info.setparam.contact;
                this.earnestmoney = info.setparam.vouch;
                console.log(info.cate_id);
                if (info.setparam.extend.type_class==2) {
                    // this.brandvalue.id = info.cate_id;
                    // this.brandvalue.mobile_name = info.cate.cate_name ? info.cate.cate_name : info.cate.brand_name;
                    this.extend=info.setparam.extend;
                    this.type_class=2
                    this.brankinfo={
                        id:info.cate.cate_id,
                        name:info.cate.cate_name
                    };
                } else {
                    this.brankinfo={
                        id:info.cate.cate_id,
                        name:info.cate.cate_name
                    };
                }

                // 编辑赋值车系选择
                // let index:number=0;
                // for (let i=0 ;i<this.catelist.length;i++){
                //     if(info.cate.brand_id==this.catelist[i].id){
                //         index=i;
                //     }
                // }
                // this.cartype = [];
                // for (let i = 0; i < this.catelist[index].child.length; i++) {
                //     this.cartype = [...this.cartype, this.catelist[index].child[i].mobile_name];
                // }
                // this.brandindex = index;


                if (info.goods_thumb !== "") {
                    this.value1 = [{url: info.goods_thumb, response: {data: {name: info.goods_thumb}}}];
                }
                if (res.data.info.total_image.length > 0) {
                    for (let i = 0; i < info.total_image.length; i++) {
                        this.value2 = [...this.value2, {
                            url: info.total_image[i],
                            response: {data: {name: info.total_image[i]}},
                        }];
                        this.files = [...this.files, info.total_image[i]];
                    }
                }

            });
        }

        // 取消
        public closeadd(): void {
            this.$router.push('/mycar');
        }

        // 发布车源
        public releaseCar(): void {
            let files:any={};
            for(let i=0;i<this.files.length;i++){
                files[i]=this.files[i];
            }
            this.post('api/v1/releaseCar', {
                setparam:{
                    year: this.caryear,
                    output: this.carrow,
                    out_color: this.outcolor,
                    in_color: this.insidecolor,
                    type: this.typevalue,
                    mold: this.cartimetype,
                    emission: this.carstander,
                    area: this.caraddress,
                    market_price: this.carmarketprice,
                    shop_price: this.carprice,
                    store_count: this.carnum,
                    start_time: this.timestar,
                    end_time: this.timeend,
                    setting: this.cardeploy,
                    contact: this.mobile,
                    vouch: this.earnestmoney,
                },
                first:this.brankinfo.id,
                fifth: this.brankinfo.id,
                cate_id: this.brankinfo.id,
                goods_thumb: this.file,
                // files: JSON.stringify(this.files),
                extend: JSON.stringify(this.extend),
                type_class:this.type_class,
                img_list:{
                    file_cate:{0:'outward'},
                    file:files
                }
            }).then((res: any) => {
                this.toast('发布成功！');
                setTimeout(() => {
                    this.$router.push('/mycar');
                }, 1500);
            });
        }

        // 编辑
        public saveCar(): void {
            let files:any={};
            for(let i=0;i<this.files.length;i++){
                files[i]=this.files[i];
            }
            this.post('api/v1/saveCar', {
                setparam: {
                    files: JSON.stringify(this.files),
                    year: this.caryear,
                    output: this.carrow,
                    out_color: this.outcolor,
                    in_color: this.insidecolor,
                    type: this.typevalue,
                    mold: this.cartimetype,
                    emission: this.carstander,
                    area: this.caraddress,
                    market_price: this.carmarketprice,
                    shop_price: this.carprice,
                    store_count: this.carnum,
                    start_time: this.timestar,
                    end_time: this.timeend,
                    setting: this.cardeploy,
                    contact: this.mobile,
                    vouch: this.earnestmoney,
                },
                first:this.brankinfo.id,
                fifth: this.brankinfo.id,
                cate_id: this.brankinfo.id,
                goods_id: this.id,
                goods_thumb: this.file,
                extend: JSON.stringify(this.extend),
                img_list:{
                    file_cate:{0:'outward'},
                    file:files
                },
                type_class:this.type_class,
            }).then((res: any) => {
                this.toast('修改成功！');
                setTimeout(() => {
                    this.$router.push('/mycar');
                }, 1500);
            });
        }

        // 显示关闭品牌车系模态框
        public brandclose(): void {
            // if (this.brand) {
            //     this.brand = false;
            // } else {
            //     this.brand = true;
            //     setTimeout(() => {
            //         (<any> this).$refs.brandModelScroll.refresh();
            //     }, 100);
            //     //     this.$nextTick(() => {
            //     //         (<any> this).$refs.brandModelScroll.refresh();
            //     // });
            // }
            if (this.brand) {
                this.brand = false;
            } else {
                this.brand = true;
                this.brankinfo='';
                this.brandList=[];
                this.getSelParam(1);
                // setTimeout(() => {
                //     (<any> this).$refs.brandModelScroll.refresh();
                // }, 100);
                //     this.$nextTick(() => {
                //         (<any> this).$refs.brandModelScroll.refresh();
                // });
            }
        }

        // 品牌车系模态框选择品牌并打开车系模态框
        // public brandclick(idx: number): void {
        //     let index: number = idx;
        //     if (this.brandchlid && this.brandindex == index) {
        //         this.brandchlid = false;
        //         this.brandindex = -1;
        //     } else {
        //         setTimeout(() => {
        //             (<any> this).$refs.brandChildScroll.refresh();
        //         }, 300);
        //         this.brandchlid = true;
        //         this.brandListchild = this.brandList[index].child;
        //         this.brandindex = index;
        //     }
        // }

        //品牌点击事件
        public brandclick(item: any): void {
            if(this.type_class==1){
                if(item.level<4){
                    this.brankinfo=item;
                    this.getSelParam(item.level+1)
                }else {
                    this.brankinfo=item;
                    this.brand=false
                }
            }else {
                this.brankinfo=item;
                this.brand=false
            }

        }

        // 车系选择
        // public brandchildclick(idx: number): void {
        //     let index: number = idx;
        //     if (index > 0 || index == 0) {
        //         this.brand = false;
        //         this.brandchlid = false;
        //         this.brandvalue = this.brandListchild[index];
        //     } else {
        //         this.brand = false;
        //         this.brandchlid = false;
        //         this.brandvalue = this.brandList[this.brandindex];
        //     }
        //     this.brandindex = -1;
        // }

        // 不限品牌
        public brandclear() {
            this.brand = false;
            this.brandchlid = false;
            // this.brandvalue = {mobile_name: '', id: ''};
        }

        // 填写品牌方式切换
        public diyBrank(): void {
            if (this.type_class==2) {
                this.type_class = 1;
            } else {
                this.type_class = 2;
            }
            this.brankinfo = '';
        }


        //筛选数据
        public getSelParam(type:number): void {
            this.post("api/v1/getSelParam", {
                type:type,
                parent_id:this.brankinfo?this.brankinfo.id:''
            }).then((res: any) => {
                let data = res.data.set_param;
                this.brandList = res.data.cateList;
                this.backinfo=res.data.cateListOne;
                this.letternumber='A';
            });
        }

        //品牌点击字母超链接滚动
        public scrollTo(key:any):void {
            this.letternumber=key;
            let top:any = -(window as any).document.getElementById(key).offsetTop;
            (this as any).$refs.brandModelScroll.scrollTo(
                0,
                top,
                1000,
                // ease[this.scrollToEasing]
            )
        }

        //返回上级
        public brandback():void{

            if(this.backinfo.p_level){
                if(this.backinfo.p_parent_id){
                    this.brankinfo={name: this.backinfo.p_parent_name, id: this.backinfo.p_parent_id}
                    this.getSelParam(this.backinfo.p_level)
                }else {
                    this.brankinfo={name: '', id:''}
                    this.getSelParam(1)
                }
            }else {
                this.brankinfo={name: '', id:''}
                this.brandclear()
            }

        }
    }
</script>

<style scoped lang="stylus">
    input::-webkit-input-placeholder {
        color: #ccc;
    }

    textarea::-webkit-input-placeholder {
        color: #ccc;
    }

    .brand-link
        position fixed
        height fit-content!important
        display flex
        flex-direction column
        top 0
        bottom 0
        margin auto
        right 10px
        z-index 11
        padding 10px 0
        background rgba(0,0,0,.1)
        border-radius 100px
        div
            padding 3px 6px
            font-size .9rem
        .active
            color #4876ff
            font-weight bold

    .letter-title
        background #efeff2
        color #888
        padding 10px
        text-align left

    .line-active
        border-bottom 10px solid #f2f2f2 !important

    .color-active
        color #339933

    .brand-model {
        /*padding-top 45px*/
        margin-top 85px;
        box-sizing border-box
        top: 0;
        position: fixed;
        width: 100vw;
        height: calc(100vh - 85px);
        background: white;
        display: none;
        z-index: 11;
    }

    .brand-active {
        display: block;
    }

    .brand-head {
        position fixed;
        top:45px;
        background: white;
        width: 100vw;
        height: 40px;
    }

    .brand-head > div {
        text-align: center;
        line-height: 40px;
    }

    .brand-head-pic {
        top: 10px;
        left: 3vw;
        position: absolute;
        width: 18px;
        height: 18px;
    }

    .mine-list {
        background: white;
    }

    .mine-list-list-left {
        display: flex;
        flex-direction: row;
        justify-content space-between;
        align-items: center;
        border-bottom: 1px solid #efeff4;
        padding: 10px 3vw;
    }

    .mine-list-list-left-name {
        margin-left: 10px;
        line-height 22px;
        text-align left;
    }

    .mine-list-list-left-img, .mine-list-list-left-img img {
        height: 25px;
        width: 25px;
    }

    .brand-child {
        position: fixed;
        top: 0;
        right: 0;
        width: 0;
        max-height: 100vh;
        transition: .3s;
        z-index: 12;
        background: white;
        box-shadow: 0 0 10px #ccc;
    }

    .brand-child-active {
        width: 70vw;
    }

    .foot-btn
        display flex
        flex-direction row
        justify-content flex-end
        padding-bottom 10px
        padding-right 20px

        .close-btn
            background #aaa
            font-size 14px
            border-radius 8px
            padding 10px 20px
            font-weight bold
            color white

        .submit-btn
            background salmon
            color white
            font-weight bold
            border-radius 8px
            font-size 14px
            padding 10px 20px
            margin-left 20px


    .input-default
        width 35vw
        height 25px
        border 1px solid #ccc
        margin 0 8px
        padding-left 8px
        font-size 14px

    .input-small
        width 21vw
        height 25px
        border 1px solid #ccc
        margin 0 8px
        padding-left 8px
        font-size 14px

    .input-textarea
        width 70vw
        height 40px;
        font-size 14px;
        padding-left 8px
        margin 0 8px
        border 1px solid #ccc


    .notice
        color red

    .login-list
        display flex
        flex-direction row
        align-items center
        margin-top 10px

        > div
            width 22vw;
            text-align right

        >>> .cube-select
            width fit-content
            padding-top 4px
            padding-bottom 4px

    .article-pic
        display flex
        flex-direction row
        flex-wrap wrap
        width 80vw
        margin auto
        margin-top 10px

    >>> .cube-select
        margin 0 8px
        padding-top 4px
        padding-bottom 4px
        border 1px solid #ccc
        width 24vw !important
        text-align left !important

    >>> .cube-upload-file-def
    >>> .cube-upload-btn-def
        width 24vw
        border 18vw
        border 1px solid #ccc

    >>> .cube-upload-btn
        margin 0

    .ui-select
        width 68vw !important
        text-align left !important

</style>
